<template>
    <div>
      <searchBox @searchChange="searchChange" />
      <div class="gva-table-box">
        <div class="gva-btn-list"><el-text class="mx-1" size="large">{{burialDetail.name}} 数据统计</el-text></div>
        <el-card>
          <el-row style="margin:30px auto">
            <el-col :span="2" />
            <el-col :span="5">
              <el-statistic
                title="广告曝光"
                :value.number="eventsSumData.showAD"
              />
              <el-text class="mx-1" size="small"></el-text>
            </el-col>
  
            <el-col :span="5">
              <el-statistic
                title="完整播放量"
                :value="eventsSumData.ViewOverAD"
              />
              <el-text class="mx-1" size="small"></el-text>
            </el-col>
            <el-col :span="5">
              <el-statistic
                title="曝光PV"
                :value="eventsSumData.flow"
              />
              <el-text class="mx-1" size="small">官方数据</el-text>
            </el-col>
         
            <el-col :span="5">
              <el-statistic
                title="完整播放率"
                :value="(eventsSumData.showAD&&(eventsSumData.ViewOverAD/eventsSumData.showAD)*100).toFixed(2)"
              >
              <template #suffix>%</template>
                </el-statistic>
                <el-text class="mx-1" size="small"></el-text>
            </el-col>
            <el-col :span="2" />
          </el-row>
        </el-card>
      </div>
  
      <div class="gva-table-box">
        <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
      </div>
      <div class="gva-table-box">
      <el-text
          class="mx-1"
          size="large"
        >详细数据</el-text>
        <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          row-key="ID"
          :data="tableData"
          border
        >
  
          <el-table-column
            align="left"
            label="日期"
            prop="date"
          />
          <el-table-column
            align="left"
            label="曝光量"
            prop="showAD_report_count"
          />
          <el-table-column
            align="left"
            label="完整播放量"
            prop="ViewOverAD_report_count"
          />
          <el-table-column
            align="left"
            label="曝光PV"
            prop="show"
          />
          <el-table-column
            align="left"
            label="ECPM"
            prop="eCPM"
          />
          <el-table-column
            align="left"
            label="收入(元)"
            prop="realCost"
          />
          
        </el-table>
    </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useTransition } from '@vueuse/core'
  import lineChart from '../../components/echarts/lineChart.vue'
  import searchBox from '../../components/search/searchBox.vue'
  import type { TabsPaneContext } from 'element-plus';
  import { sumByKey, renameKeyInArray,removeKeyFromArray,mergeArraysByKey } from '../../utils/fmtData'
  import {
    getQmBurialDataList
  } from '@/api/qmBurialData'
  import { getHugeList } from '@/api/openApi'

  const route = useRoute()
  const searchInfo = ref({})
  const tableData = ref([])
  let activeName = ref < string | number > ('showAD')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName = ref(tab.paneName)
    const td = JSON.parse(JSON.stringify(eventsData.value))
    eventsData.value = {ViewOverAD:[],showAD:[],flow:[]}
    setTimeout(() => {
        eventsData.value = td
    }, 200);
  }


  const burialDetail = ref({})
  
  const events = ['ViewOverAD','showAD']
  const eventsSumData = ref({ViewOverAD:0,showAD:0,flow:0})
  const eventsData = ref({ViewOverAD:[],showAD:[],flow:[]})
  var searchChange = function(date) {
    searchInfo.value = date
    getEventData()
  }




  const chartData = ref({
  xAxis: [],
  series: [{
    name: '曝光量',
    type: 'line',
    data: []
  },{
    name: '完整播放量',
    type: 'line',
    data: []
  }],
  legend: ['曝光量','完整播放量'],
  title: '埋点数据'
})
  const getEventData = async() => {
    const res = await getHugeList({  type: 'flow', ...searchInfo.value })
    if (res.code === 0) {
      let arr = []
      res.data.list.forEach(element => {
          if(element.response)
            arr.push(JSON.parse(element.response))
      });
      let list = sumByKey(arr,'date')
      eventsSumData.value.flow = 0
      list.forEach(v => {
            if(v.show)
                eventsSumData.value.flow += v.show
        })
        console.log("list",list)
        eventsData.value.flow = list
    }
    // events.forEach(v=>{
    //     getTableData(v)
    // })

    const res1 = await getQmBurialDataList({ flag:"ViewOverAD",type:2, ...searchInfo.value })
    if(res1.code === 0){
        let list = sumByKey(res1.data.burial_data,'date')
        list = removeKeyFromArray(list,'user_count')
        
        //计算总量
        eventsSumData.value["ViewOverAD"] = 0
        list.forEach(v => {
            if(v.report_count)
                eventsSumData.value["ViewOverAD"] += v.report_count
        })
        list = renameKeyInArray(list,'report_count',"ViewOverAD"+'_report_count')
        eventsData.value["ViewOverAD"] = list
        chartData.value.xAxis = list.map(v => v.date)
        chartData.value.series[0].data = list.map(v => v.ViewOverAD_report_count)
    }


    const res2 = await getQmBurialDataList({ flag:"showAD",type:2, ...searchInfo.value })
    if(res2.code === 0){
        let list = sumByKey(res2.data.burial_data,'date')
        list = removeKeyFromArray(list,'user_count')
        
        //计算总量
        eventsSumData.value["showAD"] = 0
        list.forEach(v => {
            if(v.report_count)
                eventsSumData.value["showAD"] += v.report_count
        })
        list = renameKeyInArray(list,'report_count',"showAD"+'_report_count')
        eventsData.value["showAD"] = list
        chartData.value.series[1].data = list.map(v => v.showAD_report_count)
    }


    let md = mergeArraysByKey(eventsData.value.ViewOverAD,eventsData.value.showAD,'date')
    tableData.value = mergeArraysByKey(md,eventsData.value.flow,'date')
        
  }

  const getTableData = async(flag) => {
    const res = await getQmBurialDataList({ flag, ...searchInfo.value })
    if(res.code === 0){
        let list = sumByKey(res.data.burial_data,'date')
        list = removeKeyFromArray(list,'user_count')
        
        //计算总量
        eventsSumData.value[flag] = 0
        list.forEach(v => {
            if(v.report_count)
                eventsSumData.value[flag] += v.report_count
        })
        list = renameKeyInArray(list,'report_count',flag+'_report_count')
        eventsData.value[flag] = list
        return list
    }
  }

  // 查询
const getFlowTableData = async() => {
    const res = await getHugeList({  type: 'flow', ...searchInfo.value })
    if (res.code === 0) {
      let arr = []
      res.data.list.forEach(element => {
          if(element.response)
            arr.push(JSON.parse(element.response))
      });
      let list = sumByKey(arr,'date')
      eventsSumData.value.flow = 0
      list.forEach(v => {
            if(v.show)
                eventsSumData.value.flow += v.show
        })
        console.log("list",list)
        eventsData.value.flow = list
    }
}
  </script>
  <style>
    .el-col {
        text-align: center;
    }

  </style>
  